<template>
  <!-- 专业领域 -->
  <div class="service">
    <!-- <img class="service_bg" src="@/assets/images/service_bg.png" alt="背景" /> -->
    <!-- 组件标题 -->
    <div class="title">
      <div class="text">PROFESSIONAL FIELD</div>
      <!-- <p>We will defend your rights</p> -->
    </div>
    <!-- clearfloat -->
    <div class="service_list ">
      <div
      @click="onItem(item.id)"
        :to="{name:'en_field',query:{cid:item.id}}"
        :class="[index>3?'service_item2':'service_item']"
        class="service_item_modile"
        v-for="(item,index) in serviceCate_list"
        :key="index"
      >
        <div class="service_slide">
          <span>{{index+1}}</span>
          <!-- <i></i> -->
          <p>{{item.title}}</p>
          <!-- <img src="@/assets/images/service_item_bg.png" alt /> -->
          <div class="service_slide_more">more +</div>
        </div>
      </div>
      <router-link :to="{name:'en_field',query:{cid:serviceCate[0].id}}" class="more">
        <span>MORE</span>
        <!-- 箭头背景 -->
        <i></i>
      </router-link>
    </div>
  </div>
</template>
<script>
import { service_cate } from "@/api/field.js";
export default {
  data() {
    return {
      serviceCate: [{ id: "" }], //专业领域原数据
      serviceCate_list: [] //当前循环数据
    };
  },
  methods: {
     onItem(id) {
      this.$router.push({ name: "en_field" });
      this.$store.commit("changeFieldCurrentEN", id);
    },
    //专业领域分类
    getServiceCate() {
      service_cate().then(res => {
        if (this.$store.state.headTitle.equipment == "pc") {
          this.serviceCate = res.data.data.EN;
          this.serviceCate_list = this.serviceCate.slice(0, 8);
        } else {
          this.serviceCate = res.data.data.EN;
          this.serviceCate_list = this.serviceCate.slice(0, 5);
        }
      });
    }
  },
  watch: {
    "$store.state.headTitle.equipment": {
      deep: true,
      handler: function(newValue, oldValue) {
        if (newValue == "pc") {
          this.serviceCate_list = this.serviceCate.slice(0, 8);
        } else {
          this.serviceCate_list = this.serviceCate.slice(0, 5);
        }
      }
    }
  },
  mounted() {
    //专业领域分类
    this.getServiceCate();
  }
};
</script>
<style scoped src="./sass/home.css"></style>